<template>
  <div class="box">
    <div class="left">
      <div class="title">拿取类型汇总</div>
      <div class="title2">
        <!-- 请拿取物品,系统自动检测(非设备物品请手动输入拿取数量) -->
        <div class="one">
          <div>
            <i
              class="el-icon-warning"
              style="color: #249087; font-size: 30px"
            ></i>
          </div>
          <div>
            <div class="text">赋码物品(设备类)直接从货架拿取,系统自动感应</div>
            <div class="text">
              未赋码物品(非设备类)直接从货架拿取,请用pda扫码货位条码,选择种类，批次，数量
            </div>
          </div>
        </div>
        <div class="two">
          <div>
            <i
              class="el-icon-search"
              style="color: #249087; font-size: 30px"
            ></i>
          </div>
          <div>
            <div>找不到物品？</div>
            <div class="text" @click="search">点此查找</div>
          </div>
        </div>
      </div>
      <div class="table">
        <el-table
          :data="tableData"
          height="100%"
          style="width: 100%"
          border
          :header-cell-style="{
            'text-align': 'center',
            color: '#009191',
            'font-size': '18px',
          }"
          @row-click="rowClick"
          :row-style="isRed"
        >
          <el-table-column type="index" label="序号" width="60" align="center">
          </el-table-column>
          <el-table-column prop="materialName" label="物品类型" align="center">
          </el-table-column>
          <el-table-column prop="specs" label="规格型号" align="center">
          </el-table-column>
          <el-table-column
            prop="recommendNum"
            label="建议"
            align="center"
            width="70"
          >
          </el-table-column>
          <el-table-column prop="number" label="拿取" align="center" width="70">
          </el-table-column>
        </el-table>
      </div>
      <div class="bottom">
        <!-- <el-button plain class="btnP">货位图示</el-button> -->
        <!-- <div> -->
        <!-- <el-button
            type="primary"
            icon="el-icon-plus"
            class="bth2"
            @click="add"
            >手动添加</el-button
          > -->
        <el-button
          type="primary"
          icon="el-icon-check"
          class="bth2"
          @click="sure"
          >确认拿取完毕</el-button
        >
        <!-- </div> -->
      </div>
    </div>
    <div class="right">
      <div class="title">拿取物品明细</div>
      <div class="table" v-show="inventoryUnit == '单体'">
        <el-table
          :data="tableData2"
          height="100%"
          style="width: 100%"
          border
          :header-cell-style="{
            'text-align': 'center',
            color: '#009191',
            'font-size': '18px',
          }"
        >
          <el-table-column prop="goodsCode" label="物品编号" align="center">
          </el-table-column>
          <el-table-column prop="number" label="数量" align="center">
          </el-table-column>
        </el-table>
      </div>

      <div class="table" v-show="inventoryUnit == '批次'">
        <!-- <div>
          <div style="font-size: 20px;color:'#959595">非设备或无编码物品</div>
          <div style="font-size: 20px;color:'#959595">
            &nbsp;&nbsp;&nbsp; 请输入拿取数量
          </div>
          <div style="margin-top: 20px">
            <el-input-number
              v-model="item.number"
              @change="changeCount($event, item)"
            ></el-input-number>
          </div>
        </div> -->
        <el-table
          :data="tableData3"
          height="100%"
          style="width: 100%"
          border
          :header-cell-style="{
            'text-align': 'center',
            color: '#009191',
            'font-size': '18px',
          }"
        >
          <el-table-column type="index" label="序号" width="60" align="center">
          </el-table-column>
          <el-table-column prop="goodsCode" label="批次编号" align="center">
          </el-table-column>
          <el-table-column prop="number" label="数量" align="center">
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div>
      <el-dialog title="手动添加" :visible.sync="dialogFormVisible" width="40%">
        <el-form
          status-icon
          ref="ruleForm"
          :rules="rules"
          :model="form"
          label-width="100px"
        >
          <el-form-item label="物品类型:" prop="value">
            <el-cascader
              v-model="form.value"
              :options="options"
              :props="{ expandTrigger: 'hover' }"
              @change="handleChange"
              filterable
              style="width: 100%"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="规格型号:" prop="specs">
            <el-select
              filterable
              v-model="form.specs"
              placeholder="请选择规格型号"
              style="width: 100%"
            >
              <el-option
                v-for="item in specArr"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="拿取:" prop="number">
            <el-input-number v-model="form.number" :min="1"></el-input-number
          ></el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" class="bth2" @click="submit('ruleForm')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <el-dialog
        title="物资查询"
        :visible.sync="dialogFormVisible2"
        width="50%"
      >
        <el-form
          :inline="true"
          :model="form"
          class="demo-form-inline"
          size="small"
        >
          <el-form-item label="物资名称:">
            <el-input
              placeholder="请输入物资名称"
              v-model="form2.materialName"
            ></el-input>
          </el-form-item>
          <el-form-item label="规格型号:">
            <el-input
              placeholder="请输入规格型号"
              v-model="form2.specs"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :loading="loading"
              @click="searchD"
              icon="el-icon-search"
              class="bth2"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
        <el-table
          :data="data"
          v-loading="loading"
          height="380"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column type="index" label="序号" width="60">
          </el-table-column>
          <el-table-column prop="materialName" label="物资名称">
          </el-table-column>
          <el-table-column prop="specs" label="规格型号"> </el-table-column>
          <el-table-column prop="goodsCode" label="物品编号"> </el-table-column>
          <el-table-column prop="locationCode" label="所在货位">
          </el-table-column>
        </el-table>
        <div style="text-align: right; margin-top: 10px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 50, 100, 200]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>

        <div style="margin-top: 20px; text-align: center">
          <el-button @click="dialogFormVisible2 = false">取消</el-button>
          <el-button type="primary" class="bth2" @click="highLight"
            >确认</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  getTemplateByName,
  selectByTypeCode,
  getCascader,
  addGoods,
  getAllMaterialsSpec,
  getGoods,
  toolStorage,
  lightGuide,
} from "@/common/api";
export default {
  name: "BorrowGoods",
  props: {},
  components: {},
  data() {
    return {
      handData: [], //手动添加数据
      // selectData: [], //定时查询的数据
      tableData: [],
      tableData2: [],
      tableData3: [],
      clickItem: [],
      item: {},
      timer: null, //轮询
      timer2: null, //修改数量防抖
      form: {
        value: [],
        specs: "",
        number: 1,
      },
      rules: {
        value: [{ required: true, message: "请选择物品类型", trigger: "blur" }],
        specs: [{ required: true, message: "请选择规格型号", trigger: "blur" }],
        number: [
          { required: true, message: "请选择拿取数量", trigger: "blur" },
        ],
      },
      dialogFormVisible: false,
      inventoryUnit: "",

      options: [],
      specArr: [],
      form2: {
        materialName: "",
        specs: "",
      },
      dialogFormVisible2: false,
      data: [],
      multipleSelection: [],
      pageNum: 1,
      pageSize: 10,
      currentPage: 1,
      total: 0,
      loading: false,
    };
  },
  computed: {
    ...mapState(["templateName"]),
    // tableData() {
    //   return [...this.selectData, ...this.handData];
    // },
  },
  watch: {
    "form.value": function (newVal) {
      if (!newVal) return;
      getAllMaterialsSpec({ name: newVal[1] }).then((res) => {
        if (res.success) {
          this.specArr = res.data;
        }
      });
    },
  },
  created() {
    this.getCascader();
  },
  destroyed() {
    this.closeT();
  },
  methods: {
    getCascader() {
      getCascader({ materialBig: "工器具" }).then((res) => {
        if (res.success) {
          res.data.forEach((i) => {
            i["label"] = i.name;
            i["value"] = i.name;
            if (i.children && i.children.length) {
              i.children.forEach((item) => {
                item["label"] = item.materialName;
                item["value"] = item.materialName;
              });
            }
          });
          this.options = res.data;
        }
      });
    },
    handleChange(e) {
      this.form.specs = "";
    },
    rowClick(e) {
      this.item = e;
      this.clickItem = [e];
      this.inventoryUnit = e.inventoryUnit;
      if (e.inventoryUnit == "单体") {
        this.tableData2 = e.goodsList;
      }
      if (e.inventoryUnit == "批次") {
        this.tableData3 = e.goodsList;
      }
    },
    changeCount(e, item) {
      if (this.timer2) {
        clearTimeout(this.timer2);
        this.timer2 = null;
      }
      this.timer2 = setTimeout(() => {
        const { number, specs, materialName } = item;
        addGoods({ number, specs, materialName }).then((res) => {
          if (res.success) {
            // this.$successMsg(res.message);
            item.number = e;
          }
        });
      }, 300);
    },
    isRed({ row }) {
      const checkIdList = this.clickItem.map((item) => item.typeCode);
      if (checkIdList.includes(row.typeCode)) {
        return {
          backgroundColor: "#E6F7F7",
        };
      }
    },
    updataD() {
      this.getData(); //轮询获取数据
      this.closeT();
      this.timer = setInterval(() => {
        this.getData();
        if (this.item) this.rowClick(this.item);
      }, 2000);
    },
    getData() {
      getGoods().then((res) => {
        if (res.success) {
          res.data.forEach((i) => {
            i["number"] = i["number"] ? i["number"] : 0;
          });
          this.tableData = res.data;
        } else {
          this.tableData = [];
          // this.$errorMsg(res.message);
        }
      });
    },
    closeT() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    add() {
      this.dialogFormVisible = true;
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const { number, specs, value } = this.form;
          addGoods({ number, specs, materialName: value[1] }).then((res) => {
            if (res.success) {
              this.$successMsg(res.message);
              this.dialogFormVisible = false;
            }
          });
        } else {
        }
      });
    },
    sure() {
      this.closeT();
      this.$emit("goStep", 3);
    },
    search() {
      this.dialogFormVisible2 = true;
      this.searchD();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(e) {
      this.pageSize = e;
      this.getTable();
    },
    handleCurrentChange(e) {
      this.pageNum = e;
      this.getTable();
    },
    searchD() {
      this.pageNum = 1;
      this.getTable();
    },
    getTable() {
      let param = {
        ...this.form2,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      this.loading = true;
      toolStorage(param)
        .then((res) => {
          this.loading = false;
          if (res.success) {
            this.data = res.data.records;
            this.total = res.data.total;
          } else {
            this.$errorMsg(res.message);
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    highLight() {
      if (!this.multipleSelection.length) {
        this.$warnMsg("至少选择一个物资");
      }
      lightGuide({
        goodsCodes: this.multipleSelection.map((i) => i.goodsCode).join(","),
      }).then((res) => {
        if (res.success) {
        }
      });
    },
  },
};
</script>


<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  // gap: 5%;
  .left {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2),
      /* 水平偏移 | 垂直偏移 | 模糊半径 | 阴影颜色与透明度 */ 0 6px 20px
        rgba(0, 0, 0, 0.19); /* 可以添加多个阴影效果 */
    border-radius: 14px;
    padding: 20px;
    width: 60%;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    .title {
      color: #009191;
      font-weight: bold;
      font-size: 20px;
    }
    .title2 {
      // background: linear-gradient(to right, #f59a23, #93a65e, #1db4a6);
      // color: white;
      // font-weight: bold;
      // font-size: 20px;
      // padding: 4px;
      // margin-top: 10px;
      // text-align: center;
      // white-space: nowrap;
      display: flex;
      align-items: center;
      margin-top: 10px;
      gap: 10px;

      .one {
        width: 75%;
        align-items: center;
        display: flex;
        gap: 10px;
        background-color: #f2f2f2;
        padding: 10px;
        border-radius: 10px;
        .text {
          // white-space: nowrap;
        }
      }
      .two {
        flex: 1;
        align-items: center;
        display: flex;
        gap: 10px;
        background-color: #f2f2f2;
        padding: 10px;
        border-radius: 10px;
        .text {
          color: #009191;
          font-weight: bold;
          cursor: pointer;
        }
      }
    }
    .table {
      // height: 72%;
      margin-top: 10px;
      flex: 1;
      overflow: hidden;
    }
    .bottom {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
    }
  }
  .right {
    margin-left: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2),
      /* 水平偏移 | 垂直偏移 | 模糊半径 | 阴影颜色与透明度 */ 0 6px 20px
        rgba(0, 0, 0, 0.19); /* 可以添加多个阴影效果 */
    border-radius: 14px;
    padding: 20px;
    width: 25%;
    display: flex;
    flex-direction: column;
    .title {
      color: #009191;
      font-weight: bold;
      font-size: 20px;
    }
    .table {
      height: 88%;
      margin-top: 10px;
    }
    .number {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.bth2 {
  color: white;
  background-color: #009191;
}
.btnP {
  color: #009191;
  border-color: #009191;
}
.btnP:hover {
  color: #009191; /* 悬停文字颜色 */
  border-color: #009191; /* 悬停边框颜色 */
  background-color: transparent; /* 保持背景透明 */
}

// 修改鼠标经过表格的颜色
:deep .el-table tbody tr:hover > td {
  // 隐藏
  background-color: transparent !important;
}
</style>